<template>
	<div class="stock-contianer">
		<div class="tray-button-container">
			<van-button type="primary" @click="adds.show = true" class="green-background font-size-17 edge-angle-normal">添加托盘</van-button>
		</div>
		<van-list v-model="stock.loading" :finished="stock.finished" finished-text="没有更多了" @load="controllerRequestList">
			<ul class="stock-listing">
				<li v-for="(item, index) in stock.items" :key="index">
					<p>{{ item.number }}</p>
					<p @click="eventOnItemOperate('edit', index)">编辑</p>
					<p @click="eventOnItemOperate('delete', index)">删除</p>
				</li>
			</ul>
		</van-list>
		<van-dialog v-model="adds.show" @confirm="eventClickAddsOperate" title="添加托盘" show-cancel-button>
			<van-field v-model="adds.name" placeholder="请输入托盘名称" />
		</van-dialog>
		<van-dialog v-model="edits.show" @confirm="eventClickChagesOperate" title="修改托盘" show-cancel-button>
			<van-field v-model="edits.name" placeholder="请输入托盘名称" />
		</van-dialog>
	</div>
</template>

<script>
	import { List, Field, CellGroup, Button, Dialog } from 'vant';

	export default {
		components: {
			[List.name]: List,
			[Field.name]: Field, [CellGroup.name]: CellGroup, [Button.name]: Button,
			[Dialog.Component.name]: Dialog.Component
		},
		data() {
			return {
				adds: {
                    show: false, name: ''
				},
				edits: {
                    show: false, name: '',
                    index: null
				},
				stock: {
					page: 0, limit: 30,
					loading: false, finished: false,
					items: []
				}
			}
		},
		methods: {
			controllerRequestList() {
				var url = '/api/home/tray/getlist',
					params = {
						page: this.stock.page,
						list_rows: this.stock.limit
					};

				this.$util.postRequestInterface(url, params, (res) => {
					if (res.data.data) {
                        this.stock.items = this.stock.items.concat(res.data.data);
						this.stock.page++;
					}

					if (this.stock.items.length >= res.data.count) this.stock.finished = true;
					this.stock.loading = false;
				});
            },
			eventOnItemOperate(mode, index) {
				switch (mode) {
					case 'edit':
                        this.edits.index = index;
                        this.edits.show = true;
                        this.edits.name = this.stock.items[index].number;
						break;
					case 'delete':
						this.reqeustDeleteOperate(index);
						break;
				}
			},
			eventClickAddsOperate() {
				var url = '/api/home/tray/add',
					params = {
						number: this.adds.name
					};

				this.$util.postRequestInterface(url, params, (res) => {
                    this.$toast('添加成功');
                    
                    this.stock.items = [];
					this.stock.page = 0;
					this.stock.loading = false;
                    this.stock.finished = false;
				});
            },
			eventClickChagesOperate() {
                var item = this.stock.items[this.edits.index],
                    url = '/api/home/tray/change',
					params = {
                        number: this.edits.name, token: item.token
					};

				this.$util.postRequestInterface(url, params, (res) => {
                    this.$toast('修改成功');
                    item.number = this.edits.name;
				});
			},
			reqeustDeleteOperate(index) {
				Dialog.confirm({
					title: '提示', message: '确认删除此托盘吗？'
				}).then(() => {
                    var item = this.stock.items[index],
                        url = '/api/home/tray/delete',
                        params = {
                            token: item.token
                        };

                    this.$util.postRequestInterface(url, params, (res) => {
                        this.$toast('操作成功');
                        this.stock.items.splice(index, 1);
                    });
				});
            }
		}
	}
</script>

<style scoped lang="scss">
	.tray-button-container {
		padding: 0.6rem 1rem 0.7rem;

		border-bottom: 0.1rem solid #f4f4f4;

		.green-background {
			width: 100%;
		}
	}

	.stock-listing {
		li {
			padding: 1.6rem;
			display: flex;
			font-size: 1.4rem;
			border-bottom: 0.4rem solid #f4f4f4;

			p {
				color: #999999;
			}

			p:first-child {
				flex: 1;
				color: #333333;
			}

			p:last-child {
				margin-left: 1rem;
			}

			p span {
				color: #00cc00;
			}
		}
	}
</style>